<template>
  <div class="team-detail-container" v-loading="loading">
    <el-card class="team-info-card">
      <div class="team-header">
        <div class="team-logo">
          <img :src="getImageUrl(team.logoUrl)" alt="球队Logo">
        </div>
        <div class="team-basic-info">
          <h1 class="team-name">{{ team.name }}</h1>
          <div class="team-description">{{ team.description || '暂无描述' }}</div>
        </div>
      </div>
    </el-card>
    
    <el-card class="players-card">
      <div slot="header" class="players-header">
        <span>球员名单</span>
      </div>
      
      <el-row :gutter="20" class="players-list">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="player in players" :key="player.id" class="player-item-col">
          <el-card class="player-card" shadow="hover">
            <div class="player-photo">
              <img :src="getImageUrl(player.photoUrl)" alt="球员照片">
            </div>
            <div class="player-info">
              <h3 class="player-name">{{ player.name }}</h3>
              <div class="player-details">
                <p><span class="label">号码:</span> {{ player.number || '暂无' }}</p>
                <p><span class="label">位置:</span> {{ player.position || '暂无' }}</p>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <div v-if="players.length === 0" class="no-players">
        暂无球员信息
      </div>
    </el-card>
    
    <div class="back-button">
      <el-button type="primary" icon="el-icon-back" @click="goBack">返回球队列表</el-button>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'TeamDetail',
  data() {
    return {
      team: {},
      players: [],
      loading: true
    }
  },
  created() {
    this.fetchTeamDetail()
    this.fetchTeamPlayers()
  },
  methods: {
    async fetchTeamDetail() {
      try {
        const res = await request({
          url: `/api/teams/${this.$route.params.id}`,
          method: 'get'
        })
        this.team = res.data
        this.loading = false
      } catch (error) {
        console.error('获取球队详情失败', error)
        this.loading = false
      }
    },
    async fetchTeamPlayers() {
      try {
        const res = await request({
          url: `/api/players/team/${this.$route.params.id}`,
          method: 'get'
        })
        this.players = res.data
      } catch (error) {
        console.error('获取球员列表失败', error)
      }
    },
    getImageUrl(url) {
      if (!url) {
        return require('@/assets/default-team.png')
      }
      return `http://localhost:8088/api/file/get/${url}`
    },
    goBack() {
      this.$router.push('/teams')
    }
  }
}
</script>

<style scoped>
.team-detail-container {
  padding: 20px;
}

.team-info-card {
  margin-bottom: 20px;
}

.team-header {
  display: flex;
  align-items: center;
}

.team-logo {
  width: 150px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 30px;
}

.team-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.team-basic-info {
  flex: 1;
}

.team-name {
  font-size: 24px;
  margin: 0 0 15px 0;
  color: #303133;
}

.team-description {
  font-size: 16px;
  color: #606266;
  line-height: 1.6;
}

.players-card {
  margin-bottom: 20px;
}

.players-header {
  font-size: 18px;
  font-weight: bold;
}

.players-list {
  margin-bottom: 20px;
}

.player-item-col {
  margin-bottom: 20px;
}

.player-card {
  height: 300px;
  transition: all 0.3s;
}

.player-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.player-photo {
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin-bottom: 10px;
}

.player-photo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.player-info {
  padding: 0 10px;
}

.player-name {
  font-size: 18px;
  margin: 0 0 10px 0;
  color: #303133;
  text-align: center;
}

.player-details {
  font-size: 14px;
  color: #606266;
}

.player-details p {
  margin: 5px 0;
}

.label {
  font-weight: bold;
  margin-right: 5px;
}

.no-players {
  text-align: center;
  padding: 30px;
  color: #909399;
  font-size: 16px;
}

.back-button {
  margin-top: 20px;
  text-align: center;
}
</style> 